<template>
  <div class="manage-item">
    <div :class="'cl-module c-detail-info type-' + tab">
      <div class="cl-m-body">
        <div class="apply-detail">
          <div class="course-num">{{ course.number }}</div>
          <div class="course-title">
            {{ course.title }}
          </div>
          <ul class="label-list">
            <li>{{ course.ageLabel }}</li>
            <li>{{ course.themeLabel }}</li>
            <li>{{ course.targetLabel }}</li>
            <li>{{ course.sceneLabel }}</li>
          </ul>
          <div class="clear field-con">
            <span class="label">报名时间</span>
            <span class="info">{{ course.sign_up_time }}</span>
            <div class="right-field">
              <span class="label">价格</span>
              <span class="info">{{ course.price }}</span>
            </div>
          </div>
          <div class="field-con">
            <span class="label">上课时间</span>
            <span class="info">{{ course.lesson_time }}</span>
            <div class="right-field">
              <span class="label">分成</span>
              <span class="info">{{ course.divide_rate }}</span>
            </div>
          </div>
          <div class="field-con">
            <span class="label">上课地点</span>
            <span class="info">{{ course.lesson_location }}</span>
          </div>
        </div>
        <div class="sign">
          <span v-if="tab !== 5" @click="jumpToSign(course.id)">
            报名
          </span>
          <span class="sure" v-if="tab === 1" @click="jumpToSign(course.id)">
            {{ course.count_data.sign_up_num }}/{{ course.total }}
          </span>
          <span class="status-title" v-if="tab === 1" @click="jumpToSign(course.id)">
            ({{ course.statusTitle }})
          </span>
          <span class="sure" v-if="tab === 2" @click="jumpToSign(course.id)">
            {{ course.count_data.sign_in_num }}/{{ course.count_data.sign_up_num }}/{{ course.total }}
          </span>
          <span class="sure" v-if="tab === 3 || tab === 4" @click="jumpToSign(course.id)">
            {{ course.count_data.homework_num }}/{{ course.count_data.sign_in_num }}/{{ course.count_data.sign_up_num }}/{{ course.total }}
          </span>
          <div class="btn-list" v-if="tab === 1">
            <router-link :to="'/agency/qrcode/' + course.id">
              <div class="manage-btn">签到</div>
            </router-link>
            <router-link :to="'/agency/preview/' + course.material_id">
              <div class="manage-btn">预览</div>
            </router-link>
          </div>
          <div class="btn-list" v-if="tab === 2">
            <router-link :to="'/agency/qrcode/' + course.id">
              <div class="manage-btn">签到</div>
            </router-link>
            <router-link :to="'/agency/course_material/' + course.id">
              <div class="manage-btn">上课</div>
            </router-link>
          </div>
          <div class="btn-list" v-if="tab === 3">
            <router-link :to="'/agency/summary/' + course.id">
              <div class="manage-btn">总结</div>
            </router-link>
          </div>
          <div class="btn-list" v-if="tab === 4">
            <router-link :to="'/parent/course/report/' + course.id">
              <div class="manage-btn">报告</div>
            </router-link>
          </div>
        </div>
        <div class="confirm-btn" @click="confirm(course.id)" v-if="tab === 5">
          确认
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    course: {},
    tab: {
      type: Number,
      default: false
    },
    confirmCallback: {
      type: Function
    }
  },
  methods: {
    confirm (id) {
      this.$api.course.confirm(id)
        .then(() => {
          this.confirmCallback()
        })
        .catch((e) => {
          this.$vux.toast.show({
            text: e.message,
            type: 'warn'
          })
        })
    },
    jumpToSign (id) {
      this.$router.push('/agency/user/' + id)
    }
  }
}
</script>

<style scoped lang="scss">
.manage-item{
  font-size: 13px;
  color: #6c7b8a;
}
.course-title{
  font-size: 17px;
  color:#353535;
  height:24px;
  line-height: 24px;
  font-weight: 300;
}

li {
  list-style: none;
}
.label-list li {
  float: left;
  color: #00a6ac;
  margin-right: 15px;
  margin-top: 5px;
  margin-bottom: 5px;
}

div.c-detail-info{
  background-color: #00a6ac;
}
.manage-item .type-4{
  background-color:#c8d2dc;
}
.manage-item .type-3{
  background-color:#323b46;
}
.apply-detail{
  padding-bottom: 20px;
  border-bottom: 1px solid #efeff4;
}
.cl-m-body {
  margin-left: 6px;
  padding-left: 14px;
  background-color: #fff;
  .field-con {
    margin-top: 5px;
    position: relative;
    .info{
      color:#323b46;
    }
    .label {
      margin-right: 10px;
    }
    .right-field{
      position: absolute;
      right:0px;
      top: 0px;
      span{
        display: inline-block;
        float: left;
      }
      .info{
        width:50px;
        overflow: hidden;
        text-align: right;
      }
    }
  }
}

.sign{
  margin: 15px 0;
  .sure{
    color: #60c9cf;
    font-size: 20px;
  }
  span{
    margin-right:10px;
    color:#6c7b8a;
  }
}
.btn-list{
  float: right;
  a{
    margin-right:15px;
    display: inline-block;
    float: left;
  }
  a:last-child{
    margin-right: 0px;
  }
}
.manage-btn{
  height: 57px;
  line-height: 57px;
  text-align: center;
  width: 60px;
  color: #60c9cf;
  box-shadow: 0 -1px 2px 0 #60c9cf;
  border-radius: 50px;
}
.confirm-btn {
    text-align: center;
    margin-top: 20px;
    color: #00a6ac;
}
</style>
